<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>名片管理系统 - 新增名片</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      margin: 0;
      padding: 20px;
    }

    .container {
      max-width: 800px;
      margin: 0 auto;
      background-color: white;
      padding: 20px;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .header {
      background-color: #007bff;
      color: white;
      padding: 15px 0;
      text-align: center;
      margin-bottom: 20px;
    }

    .form-group {
      margin-bottom: 15px;
    }

    .form-group label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
      width: 100%;
      padding: 8px;
      box-sizing: border-box;
    }

    .form-row {
      display: flex;
      gap: 15px;
    }

    .form-row .form-group {
      flex: 1;
    }

    button {
      background-color: #007bff;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 3px;
      cursor: pointer;
      margin-right: 10px;
    }

    button:hover {
      background-color: #0056b3;
    }

    button:disabled {
      background-color: #cccccc;
      cursor: not-allowed;
    }

    .button-group {
      margin-top: 20px;
      text-align: right;
    }
    
    .back-link {
      display: block;
      margin-bottom: 20px;
      color: #007bff;
      text-decoration: none;
    }
    
    .back-link:hover {
      text-decoration: underline;
    }
    
    .loading-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1000;
      display: none;
    }
    
    .loading-spinner {
      border: 5px solid #f3f3f3;
      border-top: 5px solid #007bff;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
  </style>
</head>

<body>
  <div class="header">
    <h1>新增名片</h1>
  </div>
  <div class="container">
    <a href="main.html" class="back-link">← 返回主页</a>
    <form id="cardForm">
      <div class="form-group">
        <label for="name">姓名</label>
        <input type="text" id="name" name="name" required>
      </div>
      <div class="form-row">
        <div class="form-group">
          <label for="title">职务</label>
          <input type="text" id="title" name="title">
        </div>
        <div class="form-group">
          <label for="department">部门</label>
          <input type="text" id="department" name="department">
        </div>
      </div>
      <div class="form-group">
        <label for="company">机构</label>
        <input type="text" id="company" name="company">
      </div>
      <div class="form-row">
        <div class="form-group">
          <label for="phone">电话</label>
          <input type="tel" id="phone" name="phone">
        </div>
        <div class="form-group">
          <label for="email">电子邮箱</label>
          <input type="email" id="email" name="email">
        </div>
      </div>
      <div class="form-row">
        <div class="form-group">
          <label for="address">地址</label>
          <input type="text" id="address" name="address">
        </div>
        <div class="form-group">
          <label for="zip">邮政编码</label>
          <input type="text" id="zip" name="zip">
        </div>
      </div>
      <div class="form-group">
        <label for="notes">备注</label>
        <textarea id="notes" name="notes" rows="3"></textarea>
      </div>
      <div class="form-group">
        <label for="folder">选择名片夹</label>
        <select id="folder" name="folder" required>
          <option value="" disabled selected>加载名片夹...</option>
        </select>
      </div>
      <div class="button-group">
        <button type="submit">保存</button>
        <button type="button" onclick="location.href='main.html'">取消</button>
      </div>
    </form>
  </div>
  
  <div class="loading-overlay" id="loadingOverlay">
    <div class="loading-spinner"></div>
  </div>

  <!-- 引入API文件和名片添加功能脚本 -->
  <script src="js/api.js"></script>
  <script src="js/add-card.js"></script>
</body>

</html>